<template>
  <div class="page-container">
    <el-card>
      <el-form
        :model="form"
        label-width="80px"
      >
        <el-form-item label="单车编号">
          <el-input v-model="form.bikeId" />
        </el-form-item>
        <el-form-item label="故障描述">
          <el-input
            v-model="form.desc"
            type="textarea"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="submit"
          >
            提交维修
          </el-button>
        </el-form-item>
      </el-form>
      <el-divider>维修进度</el-divider>
      <el-progress
        :percentage="progress"
        status="active"
      />
      <el-divider>故障统计</el-divider>
      <div
        ref="chartRef"
        class="chart-box"
      />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
const form = ref({ bikeId: '', desc: '' })
const progress = ref(30)
const chartRef = ref()
let chartInstance: echarts.ECharts | null = null
function submit() {
  progress.value = 100
}
onMounted(() => {
  chartInstance = echarts.init(chartRef.value)
  chartInstance.setOption({
    title: { text: '单车故障类型统计' },
    tooltip: {},
    legend: { data: ['刹车', '轮胎', '链条', '其他'] },
    series: [{
      name: '故障数',
      type: 'pie',
      radius: '60%',
      data: [
        { value: 10, name: '刹车' },
        { value: 5, name: '轮胎' },
        { value: 3, name: '链条' },
        { value: 2, name: '其他' }
      ]
    }]
  })
})
</script>

<script lang="ts">
export default { name: 'MaintenancePage' }
</script>

<style scoped>
.page-container { padding: 24px; }
.chart-box { width: 100%; height: 240px; background: #fff; border-radius: 8px; }
</style> 